<template>
    <div>
    <div>
<el-form :model="search" style=" margin: 20px 0 0 20px;" ref="search" label-width="100px">
  <el-row>
    <el-col :span="6" style=" margin-right: 20px;">
      <el-form-item label="仓库">
        <el-input v-model="search.key" placeholder="请输入仓库名称/编号" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="仓库状态">
        <el-select v-model="search.Status" placeholder="请选择" style="width: 100%;">
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="2"></el-option>
          <el-option label="已锁定" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button class="cz" type="primary" @click="clear()">重置</el-button>
    </el-col>
    <el-col :span="2">
      <el-button class="cx" type="primary" @click="query()">查询</el-button>
    </el-col>
  </el-row>
</el-form>
</div>
<div style="display: flex;">
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="add()">新增</el-button></div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="start">启用</el-button></div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="stop">停用</el-button></div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="lock">锁定</el-button></div>
</div>
<div id="dataDiv">
      <el-table :data="data" class="bian"  @selection-change="handleSelectionChangeDel">
      <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" prop="w_wid"></el-table-column>
        <el-table-column label="仓库编号" prop="w_wnumber"></el-table-column>
        <el-table-column label="仓库名称" prop="w_wname"></el-table-column>
        <el-table-column label="仓库容量/m³" prop="w_wcapacity"></el-table-column>
        <el-table-column label="仓库地址" prop="w_waddress"></el-table-column>
        <el-table-column label="库管部门" prop="w_wdid"></el-table-column>
        <el-table-column label="仓库主管" prop="w_wcharge"></el-table-column>
        <!-- <el-table-column label="仓库状态" prop="w_wstatus"></el-table-column> -->
        <el-table-column label="盘点结果"><template v-slot:default="scope">{{ scope.row.w_wstatus === 1 ? '启用' :  (scope.row.w_wstatus === 2 ? '停用' : (scope.row.w_wstatus === 3 ? '已锁定' : '未知')) }}</template></el-table-column> 
        <el-table-column label="操作人" prop="w_wcreateuser"></el-table-column>
        <el-table-column label="操作时间" prop="w_wcreatetime"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="upd(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
			   v-on:current-change="handleCurrentChange"
			   :current-page="currentPage"
			   :page-sizes="[2, 4, 5, 6]"
			   :page-size="pageSize"
			   layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
    </div>
     <!-- 模态框部分 -->
    <!-- 添加页面 -->
  <el-dialog title="新增" :visible.sync="insert" width="50%">
  <el-form :model="insertAdd" ref="insertFrom" label-width="100px">
    <el-row>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="仓库编号" prop="number">
          <el-input v-model="insertAdd.number"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <span class="xin">*</span><el-form-item label="仓库名称" prop="name">
          <el-input v-model="insertAdd.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
<el-col :span="12">
        <el-form-item label="仓库容量" prop="capacity">
          <el-input v-model="insertAdd.capacity"></el-input>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="库管部门" prop="did">
          <el-input v-model="insertAdd.did"></el-input>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="仓库主管" prop="charge">
          <el-input v-model="insertAdd.charge"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="insertAdd.phone"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="24">
        <el-form-item label="仓库地址" prop="address">
          <el-input v-model="insertAdd.address"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input v-model="insertAdd.sort"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
  <el-form-item label="仓库状态">
    <el-radio-group v-model="insertAdd.status" style="width: 100%;">
      <el-radio label="1">启用</el-radio>
      <el-radio label="2">停用</el-radio>
      <el-radio label="3">锁定</el-radio>
    </el-radio-group>
  </el-form-item>
</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="insertAdd.remark" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="addFrom('insertFrom')">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            data:[],
            insert:false,
            targetPage: "",
            totalRecords: 10,
            currentPage: 1,
            totalPages: 10,
            pageSize: 10,
            search:{
                key:'',
                Status:'',
            },
            insertAdd:{
              number:'',
              name:'',
              capacity:'',
              charge:'',
              phone:'',
              address:'',
              sort:'',
              status:'',
              remark:'',
            },
            }
            },
            methods: {
            //查询
        fill(){
        axios.get('http://localhost:5084/api/Warehouse/FenYe/FenYe',{
            params: {
            pageSize: this.pageSize,
            currentPage: this.currentPage
       }
        })
          .then(res => {
            this.data = res.data;
            this.totalRecords = res.data.length;
            this.totalPages = Math.ceil(this.totalRecords / this.pageSize); // 计算总页数
          })
       },
       //模糊查询
      query() {
  // 查询数据逻辑
  const { key, Status } = this.search;

  axios.get('http://localhost:5084/api/Warehouse/FenYe/FenYe', {
    params: {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      key: key,
      Status: Status,
    } 
  }).then((response) => {
    this.data = response.data;
  }).catch((error) => {
    console.log(error);
  });
},
// 处理复选框选中事件
      handleSelectionChangeDel(selection) {
  this.selectedIds = selection.map(item => item.w_wid);
  if (selection && selection.length > 0) {
        const selectedRow = selection[0]; // 获取选中的第一行数据
        this.selectedPOIndex = selectedRow.w_wid; // 获取选中行的编号
      } else {
        this.selectedPOIndex = ''; // 如果没有选中行，则清空选中行的编号
      }
       console.log("1"+this.selectedIds);
       console.log("2"+this.selectedPOIndex);
},
 //点击新增显示弹框
add() {
  this.insert = true;
},
//添加handleCurrentChange
 addFrom(insertFrom) {
    var t = this;
    this.$refs[insertFrom].validate((valid) => {
      if (valid) {
        axios.post("http://localhost:5084/api/Warehouse/Add", {
            w_wnumber: t.insertAdd.number,
            w_wname: t.insertAdd.name,
            w_wcapacity: t.insertAdd.capacity,
            w_waddress: t.insertAdd.address,
            w_wdid: 1,
            w_wcharge: t.insertAdd.charge,
            w_wphone: t.insertAdd.phone,
            w_wsort: t.insertAdd.sort,
            w_wstatus: t.insertAdd.status,
            w_wlocking: null,
            w_wcreateuser:1,
            w_wcreatetime: new Date(),
            w_wupdateuser: null,
            w_wupdatetime: null,
            w_wremark: t.insertAdd.remark,
          })
          .then(res => {
            if (res) {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.insert = false;
              t.fill();
                 // 清空表单数据
            this.insertAdd.number='';
            this.insertAdd.name='';
            this.insertAdd.capacity='';
            this.insertAdd.charge='';
            this.insertAdd.phone='';
            this.insertAdd.address='';
            this.insertAdd.sort='';
            this.insertAdd.status='';
            this.insertAdd.remark='';
            }
          })
          .catch(err => {
            this.$message({
              message: '添加失败！',
              type: 'error'
            });
          });
      }
    });
  },
//点击按钮删除
  del: function (sale) {
    if (confirm("确定删除吗")) {
        var t = this;
        axios.put(`http://localhost:5084/api/Warehouse/UpdIsDelete/UpdIsDelete?id=${sale.w_wid}&&isDeleted=${2}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("删除成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("删除失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("删除失败");
            });
    }
},
start(){
         if (confirm("确定启用吗？")) { 
        var t = this;
        axios.put(`http://localhost:5084/api/Warehouse/UpdStatus/UpdStatus?id=${this.selectedPOIndex}&&status=${1}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("启用成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("启用失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("启用失败");
            });
    }
      },
      stop(){
         if (confirm("确定停用吗？")) { 
        var t = this;
        axios.put(`http://localhost:5084/api/Warehouse/UpdStatus/UpdStatus?id=${this.selectedPOIndex}&&status=${2}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("停用成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("停用失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("停用失败");
            });
    }
      },
      lock(){
         if (confirm("确定锁定吗？")) { 
        var t = this;
        axios.put(`http://localhost:5084/api/Warehouse/UpdStatus/UpdStatus?id=${this.selectedPOIndex}&&status=${3}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("锁定成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("锁定失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("锁定失败");
            });
    }
      },
      handleSizeChange: function (size) {
				console.log(size);
				this.pageSize = size;
				this.fill();
  },
  handleCurrentChange: function (cpage) {
				console.log(cpage);
				this.currentPage = cpage;
				this.fill();
    },
//重置按钮实现
  clear() {
    // 清空搜索条件
  this.search.key = '';
  this.search.Status = '';
  // 重新调用查询方法，以获取所有数据
  this.fill();
  },
       },
       mounted: function () {
    this.fill();
 }
}
</script>

<style scoped>
.cz
{
margin-right: 20px; 
width: 80px; 
height: 40px; 
background-color: white; 
color: black;
border-color: #C1C1C1;
margin-left: 20px;
}
.cx
{
   width: 80px;
   height: 40px; 
   color: white;
   background-color: #45B984; 
}
.bian
{
    margin:20px;
}
 .el-dialog {
    max-height: 70%;
  }
  .xin{
  white:1px;
  height:1px;
  color: red;
  position: relative;
  left: 19px; /* 根据需要调整星号的水平位置 */
  top: 32px; /* 根据需要调整星号的垂直位置 */
}
.xinx{
  position: relative;
  left: 0px; /* 根据需要调整星号的水平位置 */
  top: 20px; /* 根据需要调整星号的垂直位置 */
}
</style>